/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable import/no-cycle */
/* eslint-disable import/no-named-as-default */
import React from 'react';
import { Tabs, Form, Input, Button, Radio, TimePicker, Checkbox, Modal, Select } from 'antd';
import BaseControl from './BaseControl';
import EventScriptEdit from '../event/eventScriptEdit';
import DesignUtil from '../common/DesignUtil';
import ApiHelper from '../api';

/**
 * 按钮控件
 */
class ButtonControl extends BaseControl {
  static create(props, dataProps, extProps) {
    return new ButtonControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '按钮',
      text: '按钮',
      buttontype: 'button',
      showTitle: false,
      type: 'Button',
      required: false, // 是否必填
      widthPercent: 30,
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '按钮';
    this.event = null;
    this.eventref = null;
    this.eventEdit = false;
  }

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <Tabs.TabPane tab="控件配置" key="3">
        <Form.Item label="文本">
          <Input
            placeholder="按钮文本"
            value={this.data.text}
            onChange={(event) => {
              this.data.text = event.target.value;
              parentForm.refreash();
            }}
          />
        </Form.Item>
        <Form.Item label="按钮类型" style={{ width: '45%' }}>
          <Select
            value={this.data.buttontype}
            onChange={(e) => {
              this.data.buttontype = e;
              parentForm.refreash();
            }}
          >
            <Select.Option value="button">按钮</Select.Option>
            <Select.Option value="submit">提交</Select.Option>
            <Select.Option value="reset">重置</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="事件定义">
          <Button
            type="link"
            onClick={() => {
              this.eventEdit = true;
              const newObj = {
                key: `es${DesignUtil.UUID()}`,
                name: '',
                action: this.data.text,
                createTime: DesignUtil.formatDate(new Date()),
                editTime: DesignUtil.formatDate(new Date()),
                scripts: [],
              };
              this.event = newObj;
              parentForm.refreash();
            }}
          >
            添加
          </Button>
          {parentForm.eventScripts?.map((c, index) => {
            const index2 = `${index}`;
            if (c.action !== this.data.text) {
              return <></>;
            }
            return (
              <div key={`event${index2}`}>
                <span>{c.name}</span>
                <Button
                  type="link"
                  onClick={() => {
                    this.eventEdit = true;
                    this.event = c;
                    parentForm.refreash();
                  }}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  onClick={() => {
                    parentForm.eventScripts.splice(index, 1);
                    parentForm.setEventScripts([...parentForm.eventScripts]);
                    parentForm.refreash();
                  }}
                >
                  删除
                </Button>
              </div>
            );
          })}
        </Form.Item>
        <Modal
          visible={this.eventEdit}
          mask={false}
          width={700}
          // footer={null}
          title="编辑事件"
          onOk={() => {
            const es = parentForm.eventScripts;
            const find = es.find((c) => c.createTime === this.event.createTime);
            if (find == null) {
              es.push(this.event);
            } else {
              Object.assign(find, this.event);
            }
            parentForm.setEventScripts([...es]);
            this.eventEdit = false;
            this.event = null;
            parentForm.refreash();
          }}
          onCancel={() => {
            this.eventEdit = false;
            this.event = null;
            parentForm.refreash();
          }}
        >
          <EventScriptEdit
            hideAction="true"
            ref={(r) => {
              this.eventref = r;
            }}
            eventScript={this.event}
          />
        </Modal>
      </Tabs.TabPane>,
    ];
  }

  getDesignControl(parentForm) {
    return (
      <Button
        {...this.extProps}
        htmlType={this.data.buttontype}
        onClick={(event) => {
          ApiHelper.buttonClick(
            parentForm.useformData.formkey,
            this.data.text,
            {
              action: this.data.text,
              json_data: parentForm.getJsonValue(),
              eventScripts: JSON.stringify(parentForm.eventScripts),
            },
            (success) => {},
            (fail) => {
              console.error(`${parentForm.useformData.formkey}点击${this.data.text}操作失败`);
            },
          );
        }}
      >
        {this.data.text}
      </Button>
    );
  }
}

export default ButtonControl;
